<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系图自动隐藏重叠标签</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="height: 100%; width: 100%; position: absolute;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'), 'light');
    myChart.showLoading();
    $.getJSON('les-miserables.json', function (graph) {
        myChart.hideLoading();
        option = {
            tooltip: {},
            legend: [
                {
                    data: graph.categories.map(function (a) {
                        return a.name;
                    })
                }
            ],
            series: [
                {
                    name: '架构资产',
                    type: 'graph',
                    layout: 'none',
                    data: graph.nodes,
                    links: graph.links,
                    categories: graph.categories,
                    roam: true,
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: '{b}'
                    },
                    labelLayout: {
                        hideOverlap: true
                    },
                    scaleLimit: {
                        min: 0.4,
                        max: 2
                    },
                    lineStyle: {
                        color: 'source',
                        curveness: 0.3
                    }
                }
            ]
        };
        myChart.setOption(option);
    });
</script>
</body>
</html>